<section class='shards'>
<div class='header-jumbotron'>
<h1>Shards</h1>
<div class='subtitle'>
World shards are isolated from each other and run your code separately.
Your creeps can travel between them using special portals.
<a app-nw-external-link href='http://blog.screeps.com/2017/08/shards/' target='_blank'>Learn more</a>
</div>
</div>
<div ng-if='!Shards.assignCpuMode'>
<div class='shards-list'>
<md-button class='shard-item' ng-href="#!{{'top.game-world-map' | routeSegmentUrlStateless:{shard:shard.name} }}" ng-repeat='shard in Shards.data.shards'>
<div class='shard-item__title'>
<div>{{shard.name}}</div>
<div class='shard-item__title-icons'>
<md-icon md-svg-icon='components/game/ic_layers_white_48px.svg'></md-icon>
<md-icon class='shard-item__title--hover' md-svg-icon='components/game/shards/ic_arrow_forward_white_48px.svg'></md-icon>
</div>
</div>
<div class='shard-item__info'>
<div class='shard-item__info-value'>
<div class='fa fa-globe'></div>
<strong>{{shard.rooms | number}}</strong>
claimable rooms
</div>
<div class='shard-item__info-value'>
<div class='fa fa-user-circle'></div>
<strong>{{shard.users | number}}</strong>
active players
</div>
<div class='shard-item__info-value'>
<div class='fa fa-clock-o'></div>
<strong ng-if='shard.tick'>{{shard.tick/1000 | number:1}}s</strong>
<strong ng-if='!shard.tick'>&mdash;</strong>
avg tick duration
</div>
<div class='shard-item__info-value'>
<div class='fa fa-tachometer'></div>
<span ng-if='shard.cpuLimit == 0'>No</span>
<strong ng-if='shard.cpuLimit != 0'>{{shard.cpuLimit}}</strong>
CPU limit
</div>
</div>
<div class='shard-item__cpu' ng-class="{'md-warn': shard.cpuLimit &amp;&amp; Me().cpuShard[shard.name] &gt; shard.cpuLimit}">
{{Me().cpuShard[shard.name] || 0}} CPU assigned
</div>
</md-button>
</div>
<md-button class='md-raised shards-cpu-btn' ng-click='Shards.startAssignCpuMode()' ng-disabled='Shards.canReassignCpu()'>
Re-assign CPU
</md-button>
</div>
<div ng-if='Shards.assignCpuMode'>
<div class='shards-list'>
<div class='shard-item' ng-href="#!{{'top.game-world-map' | routeSegmentUrlStateless:{shard:shard.name} }}" ng-repeat='shard in Shards.data.shards'>
<div class='shard-item__title'>
<div>{{shard.name}}</div>
<div class='shard-item__title-icons'>
<md-icon md-svg-icon='components/game/ic_layers_white_48px.svg'></md-icon>
<md-icon class='shard-item__title--hover' md-svg-icon='components/game/shards/ic_arrow_forward_white_48px.svg'></md-icon>
</div>
</div>
<div class='shard-item__info'>
<div class='shard-item__info-value'>
<div class='fa fa-globe'></div>
<strong>{{shard.rooms | number}}</strong>
claimable rooms
</div>
<div class='shard-item__info-value'>
<div class='fa fa-user-circle'></div>
<strong>{{shard.users | number}}</strong>
active players
</div>
<div class='shard-item__info-value'>
<div class='fa fa-clock-o'></div>
<strong ng-if='shard.tick'>{{shard.tick/1000 | number:1}}s</strong>
<strong ng-if='!shard.tick'>&mdash;</strong>
avg tick duration
</div>
<div class='shard-item__info-value'>
<div class='fa fa-tachometer'></div>
<span ng-if='shard.cpuLimit == 0'>No</span>
<strong ng-if='shard.cpuLimit != 0'>{{shard.cpuLimit}}</strong>
CPU limit
</div>
</div>
<div class='shard-item__cpu'>
<input class='shard-item__cpu-title' ng-change='Shards.onChangeCpu(this)' ng-class="{'md-warn': shard.cpuLimit &amp;&amp; Shards.assignCpu[shard.name] &gt; shard.cpuLimit}" ng-model='Shards.assignCpu[shard.name]'>
<md-slider max='{{Shards.sumCpu}}' min='0' ng-change='Shards.onChangeCpu(this)' ng-class="{'md-primary': !shard.cpuLimit || Shards.assignCpu[shard.name] &lt;= shard.cpuLimit, 'md-warn': shard.cpuLimit &amp;&amp; Shards.assignCpu[shard.name] &gt; shard.cpuLimit}" ng-model='Shards.assignCpu[shard.name]'></md-slider>
</div>
</div>
</div>
<div class='shards-unused-cpu' ng-class="{'shards-unused-cpu--error': Shards.balance != 0}">
Unused CPU left:
<strong>{{Shards.balance}}</strong>
</div>
<md-button class='md-raised md-primary shards-cpu-btn' ng-click='Shards.onSaveCpu()' ng-disabled='Shards.balance != 0'>
Save CPU
</md-button>
<md-button class='md-raised shards-cpu-btn' ng-click='Shards.assignCpuMode = false'>
Cancel
</md-button>
</div>
</section>
